Cómo agregar un botón de acción flotante

Prueba la forma de Compose
Jetpack Compose es el kit de herramientas de IU recomendado para Android. Obtén información para agregar componentes en Compose.
Botón de acción flotante →

Un botón de acción flotante (BAF) es un botón circular que activa la acción principal en la IU de tu app. En esta página, se muestra cómo agregar el BAF al diseño, personalizar parte de su aspecto y responder cuando se presionan los botones.

Si quieres obtener más información para diseñar un botón de acción flotante en tu app de acuerdo con los lineamientos de Material Design, consulta también Botones: botón de acción flotante.

Figura 1: Un botón de acción flotante

Cómo agregar el botón de acción flotante a tu diseño

En el siguiente código, se muestra cómo debe aparecer FloatingActionButton en tu archivo de diseño:

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:src="@drawable/ic_my_icon"
        android:contentDescription="@string/submit"
        android:layout_margin="16dp" />

De manera predeterminada, el BAF está coloreado por el atributo colorAccent, que puedes personalizar con la paleta de colores del tema.

Puedes configurar otras propiedades de BAF utilizando atributos XML o bien métodos correspondientes, como los que siguen:

  • El tamaño del BAF mediante el atributo app:fabSize o el método setSize()
  • El color de ondas del BAF, utilizando el atributo app:rippleColor o el método setRippleColor()
  • El ícono de BAF con el atributo android:src o el método setImageDrawable()

Cómo responder a presiones de botones

Puedes aplicar un View.OnClickListener para manejar los toques del BAF. Por ejemplo, en el siguiente código, se muestra un Snackbar cuando el usuario presiona el FAB:

Kotlin

val fab: View = findViewById(R.id.fab)
fab.setOnClickListener { view ->
    Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
            .setAction("Action", null)
            .show()
}

Java

FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
                .setAction("Action", null).show();
    }
});

Para obtener más información sobre las funciones del BAF, consulta la referencia de la API para FloatingActionButton.